<template>
  <div class="player">
    <div class="player-box">
      <audio
        :src="`https://music.163.com/song/media/outer/url?id=${cid}.mp3`"
        autoplay
        loop
        ref="audio"
        @canplay="myCanplay"
        @play="myPlay"
        @pause="myPause"
        @timeupdate="myTimeUdate"
        @ended="myEnd"
      ></audio>
    </div>
    <div class="music-info">
      <div class="left">
        <div :class="['left-image', 'rotate', { stoped: isPlay }]">
          <img :src="cimg" alt="" />
        </div>
        <div class="left-name">
          <span>{{ msg }}</span>
        </div>
      </div>
      <div class="right">
        <canvas ref="canvas"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cid: {
      type: Number,
      default: 0,
    },
    cname: {
      type: String,
    },
    cimg: {
      type: String,
      default:
        "https://p2.music.126.net/5zdrpxrpsG_rUB54y10_TQ==/109951166560603932.jpg",
    },
  },
  data() {
    return {
      isPlay: false, //布尔值为true表示暂停旋转
      msg: "文本",
      musicId: 0,
      allTime: 0,
      curTime: 0,
    };
  },
  watch: {
    musicId(v) {
      // this.msg = v;
    },
    cname(v) {
      this.msg = v;
    },
  },
  methods: {
    myPlay() {},
    myPause() {},
    myTimeUdate() {
      if (this.$refs["audio"]) {
        this.curTime = this.$refs["audio"].currentTime;
        this.myDrawCircle(this.curTime, this.allTime);
      }
    },
    myCanplay() {
      if (this.$refs["audio"]) {
        this.allTime = this.$refs["audio"].duration;
      }
    },
    myEnd() {
      if (this.$refs["audio"]) {
        this.$refs["audio"].play();
      }
    },
    myText() {
      let timer = setInterval(() => {
        if (this.msg.length != 0) {
          let f = this.msg.slice(0, 1);
          let l = this.msg.slice(1);
          this.msg = l + f;
        }
      }, 400);
    },
    myDrawCircle(curTime, allTime) {
      if (this.$refs["canvas"]) {
        let canvas = this.$refs["canvas"];
        let w = window.innerWidth;
        let size = (w / 375) * 50;
        canvas.width = size;
        canvas.height = size;
        let x = size / 2;
        let y = size / 2;
        let r = 20;
        let ctx = canvas.getContext("2d");
        let draw = (x, y, r, s, e, color) => {
          ctx.beginPath();
          ctx.strokeStyle = color;
          ctx.lineWidth = 3;
          ctx.arc(x, y, r, (s * Math.PI) / 180, (e * Math.PI) / 180, false);
          ctx.stroke();
          ctx.closePath();
        };
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        draw(x, y, r, 0, 360, "#666");

        let demo = curTime / allTime;
        draw(x, y, r, 0, 360 * demo, "#f00");
      }
    },
  },
  mounted() {
    this.myText();
    this.musicId = this.cid;
    this.msg = this.cname;
    // this.myDrawCircle();
    // this.$nextTick(() => {
    //   this.$$refs["audio"].currentTime = 0;
    // });
  },
};
</script>

<style lang="less" scoped>
.player {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
  .play-box,
  .music-info {
    width: 100%;
    height: 100%;
  }
  .play-box {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 10px;
  }
  .music-info {
    z-index: 100;
    width: 100%;
    height: 100%;
    display: flex;
    .left {
      width: 290px;
      height: 100%;
      display: flex;
      align-items: center;
      .left-image {
        width: 42px;
        height: 42px;
        border: 4px solid #fff;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 42px;
          height: 42px;
          display: block;
        }
      }
      .left-name {
        width: 250px;
        height: 100%;
        span {
          font-size: 16px;
          margin-left: 10px;
          line-height: 60px;
        }
      }
    }
    .right {
      width: 65px;
      height: 100%;
      text-align: center;
      line-height: 60px;
      canvas {
        vertical-align: middle;
      }
    }
  }
}
.rotate {
  // animation: myrotate 5s linear infinite;
  animation-name: myRotate;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.rotate.stoped {
  animation-play-state: paused;
}
@keyframes myRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>